export const mapChart = {
    methods: {
        drawMap() {
            var data = {
                areacode: "",
                name: "",
                value: 100,
                children: this.areaList,
            };
            var mapChart = this.$echarts.init(document.getElementById("map-chart"));
            var option = {
                tooltip: {
                    formatter: function (params) {
                        if (isNaN(params.value)) {
                            params.value = "--";
                        }
                        return (
                            params.seriesName + "<br />" + params.name + "：" + params.value
                        );
                    },
                },
                visualMap: {
                    min: 0,
                    max: 5000,
                    itemHeight: 90,
                    left: -500,
                    top: "bottom",
                    text: ["高", "低"],
                    inRange: {
                        color: ["#35d8a9", "#4dc1fe", "#4c9cfb"],
                    },
                },
                geo: {
                    map: "china",
                    roam: false,
                    zoom: 1.1,
                    label: {
                        normal: {
                            show: false,
                            fontSize: "10",
                        },
                    },
                    itemStyle: {
                        normal: {
                            borderWidth: 1,
                            borderColor: "#fff",
                            color: "#e3f0f8", // 背景颜色
                        },
                        emphasis: {
                            areaColor: "#F3B329", // 鼠标选中高亮颜色
                        },
                    },
                },
                series: [
                    {
                        name: "信息量",
                        type: "map",
                        geoIndex: 0,
                        data: data.children,
                    },
                ],
            };
            mapChart.setOption(option);
        },
        drawArea() {
            var total = 0;
            for (let index = 0; index < this.areaList.length; index++) {
                total += this.areaList[index].value;
            }
            for (let i = 0; i < this.areaList.length; i++) {
                this.areaList[i].rate = (this.areaList[i].value / total) * 100 + "%";
            }
            // console.log(this.areaList)
        },
    },
}